<template>
  <div id="app">
    <!-- 一般样式 -->
    <!-- <div class="row">
      <lr-button @click="handleCkick">Button</lr-button>
      <lr-button @click="handleCkick" type="primary">Button</lr-button>
      <lr-button @click="handleCkick" type="success">Button</lr-button>
      <lr-button @click="handleCkick" type="info">Button</lr-button>
      <lr-button @click="handleCkick" type="warning">Button</lr-button>
      <lr-button @click="handleCkick" type="danger">Button</lr-button>
    </div> -->

    <!-- 朴素样式 -->
    <!-- <div class="row">
      <lr-button plain>Button</lr-button>
      <lr-button plain type="primary">Button</lr-button>
      <lr-button plain type="success">Button</lr-button>
      <lr-button plain type="info">Button</lr-button>
      <lr-button plain type="warning">Button</lr-button>
      <lr-button plain type="danger">Button</lr-button>
    </div> -->
    
    <!-- 圆角round 样式 -->
    <!-- <div class="row">
      <lr-button round plain>Button</lr-button>
      <lr-button round plain type="primary">Button</lr-button>
      <lr-button round plain type="success">Button</lr-button>
      <lr-button round plain type="info">Button</lr-button>
      <lr-button round plain type="warning">Button</lr-button>
      <lr-button round plain type="danger">Button</lr-button>
    </div> -->

    <!-- 圆circle样式，注意不把round的样式加进来 -->
    <!-- <div class="row">
      <lr-button circle  plain><span class="iconfont "></span></lr-button>
      <lr-button circle  plain type="primary"><i class="hm-input__icon"></i></lr-button>
      <lr-button circle  plain type="success"><span class="iconfont  hm-icon-goblet"></span></lr-button>
      <lr-button circle  plain type="info"><span class="iconfont "></span></lr-button>
      <lr-button circle  plain type="warning"><span class="iconfont "></span></lr-button>
      <lr-button circle  plain type="danger"><span class="iconfont "></span></lr-button>
    </div> -->

    <!-- 禁用  +朴素样式 -->
    <!-- <div class="row">
      <lr-button disabled >Button</lr-button>
      <lr-button disabled  type="primary">Button</lr-button>
      <lr-button disabled  type="success">Button</lr-button>
      <lr-button disabled  type="info">Button</lr-button>
      <lr-button disabled  type="warning">Button</lr-button>
      <lr-button disabled  type="danger">Button</lr-button>
    </div> -->
  
  <!-- dialog弹窗 -->
  <!-- <lr-button @click="visivle=true">弹出对话框</lr-button>
    <lr-dialog width="34%" top="200px" title="温馨提醒" :visivle.sync="visivle">
      这是一条内容呐 ~
      <template v-slot:footer >
        <lr-button type="primary" @click="visivle=false">确定</lr-button>
        <lr-button  @click="visivle=false">取消</lr-button>
      </template>
    </lr-dialog> -->

  <!-- input输入框 -->
  <lr-input type="text" name="username" v-model="username" placeholder="请输入点什么叭">1</lr-input>
  <lr-input type="text" name="username" v-model="username" clearable :style="{width:'500px'}">1</lr-input>
  <lr-input type="password" name="password" v-model="username" showPassword >1</lr-input>







  </div>
</template>

<script>
export default {
  data() {
    return {
      visivle:false,
      //input的
      username:'zs'
    }
  },
  // 测试用的
  // watch:{
  //   username(){
  //     console.log(this.username);
  //   }
  // },
methods: {
  //按钮的事件
  handleCkick(e){
    console.log('123',e);
  },
}
}
</script>

<style lang="scss" scoped>
.row{
  .lr-button{
    margin: 30px;
  }
}


</style>

